<template>
  <div class="menu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item index="1">Processing Center</el-menu-item>
      <el-menu-item index="2">帖子广场</el-menu-item>
      <el-menu-item index="3">消息</el-menu-item>
      <el-menu-item index="4">个人中心</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue'
import router from '@/router'
// 获取当前实例以访问全局变量
const instance = getCurrentInstance()
// 创建响应式变量来存储导航栏激活的索引
const activeIndex = ref(getCurrentInstance()?.appContext.config.globalProperties.$menuActiveIndex)

// 处理菜单选择事件
const handleSelect = (key: string) => {
  if (instance) {
    instance.appContext.config.globalProperties.$menuActiveIndex = key
  }
  activeIndex.value = key
  if(key === "1"){
  router.push('/Home')
}
if(key === "4"){
  router.push('personal_page')
}
  if(key === "2"){
    router.push('post_page')
  }
  if(key === "3"){
    router.push('message_page')
  }
}
/*const goToPersonalPage =()=>{
  router.push('personal_page')
}*/
</script>

<style scoped>
.menu {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
}
/* 全局样式 */
.el-menu-demo {
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 左右对齐 */
}
</style>
